<!-- Vue指令v-on
1.作用：注册事件=添加监听+提供处理逻辑
2.语法：
1) v-on:事件名="内联语句"
2) v-on:事件名="methods中的函数名" 
例子:<button v-on:click="count++">按钮</button>
3.简写：@事件名
-->
<div id="app">
    <!-- 内联语句 -->
    <button @click="count--">-</button>
    <span>{{count}}</span>
    <button @click="count++">+</button>
    <!-- methods中的函数名 -->
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">黑马程序员</h1>
    <div class="box">
        <h3>小黑自动售货机</h3>
        <button @click="buy(5)">可乐五元</button>
        <button @click="buy(10)">咖啡十元</button>
        <p>银行卡余额:{{money}}</p>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            count: 100,
            isShow: false,
            money: 100
        },
        methods: {
            //提供处理逻辑函数
            fn() {
                this.isShow = !this.isShow
            },
            buy(a) {
                if (this.money > 0) {
                    this.money -= a
                } else {
                    alert('余额为0')
                }

            }
        },
    })
</script>